<template>
    <a-layout-content >
        <div class="content">
            <div >
                <a-tabs :defaultActiveKey="(panes&&panes.length>0)?panes[0].key:null"
                        hideAdd
                        :tabBarStyle="{background: 'white'}"
                        @edit="onEdit"
                        :animated="false" >
                    <template v-if="panes && panes.length>0">
                        <a-tab-pane v-for="item in panes"
                                    :key="item.key" >
                        <span slot="tab">
                            <a-icon :type="item.icon"/>{{item.title}}
                            <a-icon v-if="item.closable" type="close" @click="onClose(item.key)"/>
                        </span>
                        </a-tab-pane>
                    </template>
                </a-tabs>
            </div>
            <div class="pane-content">
                <transition name="transitionRouter" mode="out-in">
                    <keep-alive>
                        <router-view />
                    </keep-alive>
                </transition>
            </div>
        </div>
    </a-layout-content>
</template>

<script>
    export default {
        name: "Content",
        data() {
            const panes = [
                { key: '1',title: '首页',icon:'home',closable: false, },
                // { key: '2',title: 'tab2',closable: true, },
            ];
            return {
                panes: panes,
            }
        },
        methods: {
            onEdit(targetKey, action){
                console.log(targetKey, 'targetKey');
                console.log(action, 'action');
            },
            onClose(targetKey){
                console.log(targetKey, 'onClose-targetKey');
            },
        },
    }
</script>

<style scoped>
    .content{
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .pane-content {
        box-sizing: border-box;
        background-color: transparent;
        overflow: auto;
        flex: 1;
        margin: 0 20px;
    }
</style>
